<template>
  <div class="order-confirm">
    <!-- user info -->
    <div class="usr-info-wrapper">
      <van-row gutter="14">
        <van-col span="4" class="loc-icon">
          <van-icon class="_icon" name="location-o"></van-icon>
        </van-col>
        <van-col span="20" class="usr-area">
          <div class="item name-tel">收货人：白玉婷 138XXXXXXXXX</div>
          <div class="item id-no">身份证号：53241231XXXXXXXXXX</div>
        </van-col>
      </van-row>
    </div>
    <gap></gap>

    <!-- goods-list -->
    <div class="goods-list">
      <div class="item">
        <van-row gutter="14">
          <van-col span="6" class="good-img">
            <div class="img">
              <img src="https://dummyimage.com/400x400/e1e1e1/000.png&text=1" alt>
            </div>
          </van-col>
          <van-col span="18" class="info-area">
            <div class="item-info">
              <div class="name">吉祥一家-长隆森地国内公园野营两天一夜亲子活动含帐篷一顶</div>
              <div class="price-amount">
                <van-row>
                  <van-col span="22">
                    <div class="price">
                      <van-icon class="_icon" name="points"></van-icon>146
                      <span class="unit">元/人</span>
                    </div>
                  </van-col>
                  <van-col span="2">
                    <div class="amount">X2</div>
                  </van-col>
                </van-row>
              </div>
              <div class="booking-info">预定详情： 02月28日 套餐一</div>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row gutter="14">
          <van-col span="6" class="good-img">
            <div class="img">
              <img src="https://dummyimage.com/400x400/e1e1e1/000.png&text=2" alt>
            </div>
          </van-col>
          <van-col span="18" class="info-area">
            <div class="item-info">
              <div class="name">吉祥一家-长隆森地国内公园野营两天一夜亲子活动含帐篷一顶</div>
              <div class="price-amount">
                <van-row>
                  <van-col span="22">
                    <div class="price">
                      <van-icon class="_icon" name="points"></van-icon>146
                      <span class="unit">元/人</span>
                    </div>
                  </van-col>
                  <van-col span="2">
                    <div class="amount">X2</div>
                  </van-col>
                </van-row>
              </div>
              <div class="booking-info">预定详情： 02月28日 套餐一</div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <gap></gap>

    <!-- order info -->
    <div class="order-info">
      <van-cell-group>
        <van-cell title="优惠券：" value="无"/>
        <van-cell title="价格合计：" value="481元"/>
        <van-cell title="订单编号：" value="761937648726374"/>
        <van-cell title="提交时间：" value="2019-02-28 09:01:34"/>
      </van-cell-group>
    </div>

    <!-- handle area -->
    <div class="handler">
      <div class="timer">
        <van-icon name="clock-o"></van-icon>还剩下12小时30分
      </div>
      <div class="btns">
        <van-button type="default">取消订单</van-button>
        <van-button type="primary" class="pay-btn">立即付款</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Gap from "../../../components/gap/gap";

export default {
  props: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {
    Gap
  }
};
</script>

<style lang="sass">
@import "../../../common/style/variable.sass"
// 占满屏幕
$item-height: 180rpx
page
    height: 100%
    .order-confirm
        background-color: $theme-bg-color
        height: 100%
        .usr-info-wrapper
            background-color: #fff
            padding: 15rpx
            border-top: 1rpx solid #e1e1e1
            .loc-icon
                text-align: center
                font-size: 60rpx
                color: $theme-color
                font-weight: bold
                ._icon
                    line-height: 140rpx
                    height: 140rpx
            .usr-area
                font-size: 34rpx
                .item
                    margin: 22rpx 0
                    line-height: 34rpx
        .goods-list
            .item
                background-color: #fff
                height: $item-height
                padding: 15rpx 20rpx
                .van-col
                    display: inline-block
                    height: $item-height
                .good-img
                    height: $item-height
                    .img
                        width: 100%
                        height: 100%
                        image
                            display: inline-block
                            width: 100%
                            height: 100%
                .info-area
                    .item-info
                        .name
                            font-size: 30rpx
                            font-weight: bold
                        .price-amount
                            font-size: 28rpx
                            margin: 10rpx 0
                            .van-col
                                display: inline-block
                                height: auto
                            .price
                                ._icon
                                    color: #f7a64a
                                    margin-right: 14rpx
                                    font-size: 28rpx
                                    font-weight: bold
                                .unit
                                    font-size: 18rpx
                            .amount
                                font-size: 22rpx
                        .booking-info
                            font-size: 30rpx
                            color: #a1a1a1
        .handler
            width: 100%
            position: fixed
            background-color: white
            border-top: 1rpx solid #e1e1e1
            height: 120rpx
            line-height: 120rpx
            box-sizing: border-box
            padding: 0rpx 20rpx
            bottom: 0
            left: 0
            .timer,.btns
                display: inline-block
            .timer
                width: 45%
                font-size: 30rpx
            .btns
                width: 55%
                .pay-btn
                    margin-left: 20rpx
</style>
